<template>
    <a-spin :tip="$t('loadingText')" :spinning="spinning">
        <a-layout :style="{
            height: mainStore().containerHeight - mainStore().headHeight + 'px'
        }">
            <a-layout-header style="height: 31px;">
                <a-form :model="pageRequest" layout="inline" style="margin-left:20px">
                    <a-form-item :label="$t('upperComputer.loginInOrOutLog.account')" name="account">
                        <a-input v-model:value="pageRequest.account" :maxlength="50" size="small" allow-clear />
                    </a-form-item>
                    <a-form-item :label="$t('upperComputer.loginInOrOutLog.time')">
                        <a-range-picker v-model:value="operationTimes" show-time size="small" />
                    </a-form-item>
                    <a-form-item>
                        <a-button type="primary" @click="requestSearch" size="small">
                            {{
                                $t("common.search")
                            }}
                        </a-button>
                    </a-form-item>
                </a-form>
            </a-layout-header>
            <a-layout-content>
                <a-table rowKey="id" :scroll="{
                            x: 1000 /** x是columns的sum(width)值，且不能小于sum */,
                            y:
                                mainStore().containerHeight -
                                mainStore().headHeight -
                                mainStore().footHeight -
                                86
                        }" :pagination="false" :data-source="pageResult.items">
                    <a-table-column data-index="index" :width="100" :title="$t('common.serialNumber')">
                        <template #default="item">
                            <span>
                                {{
                                    item.index +
                                    1 /** 详细说明看columns的slots，在下边。index跟自己定义的要一致。item代表着行数据集合。 */
                                }}
                            </span>
                        </template>
                    </a-table-column>
                    <a-table-column data-index="account" :width="160" :title="$t('upperComputer.loginInOrOutLog.account')"
                        ellipsis />
                    <a-table-column data-index="loginInOrOut" :width="160"
                        :title="$t('upperComputer.loginInOrOutLog.loginInOrOut')" ellipsis>
                        <template #default="item">
                            <a-tag :color="getloginInOrOut(item, 0)">
                                {{
                                    getloginInOrOut(item, 1)
                                        /** 详细说明看columns的slots，在下边。loginInOrOut跟自己定义的要一致。item代表着行数据集合。 */
                                }}
                            </a-tag>
                        </template>
                    </a-table-column>
                    <a-table-column data-index="userName" :width="160" :title="$t('upperComputer.loginInOrOutLog.userName')"
                        ellipsis />
                    <a-table-column data-index="operationTime" :width="250"
                        :title="$t('upperComputer.loginInOrOutLog.operationTime')" align="center" ellipsis />
                    <a-table-column data-index="ip" :title="$t('upperComputer.loginInOrOutLog.ip')" ellipsis />
                </a-table>
            </a-layout-content>
            <a-layout-footer :style="{ height: mainStore().footHeight + 'px' }">
                <pagination :pageRequest="pageRequest" :pageResult="pageResult" @callFunc="search" />
            </a-layout-footer>
        </a-layout>
    </a-spin>
</template>

<script setup lang='ts'>
import i18n from '@/i18n';
import Pagination from '@/components/pagination/index.vue';
import { LoginInOrOutLogDto, LoginInOrOutLogResultRequestDto } from '@/models/login-log';
import { PagedResultDto } from '@/models/paged-result';
import { getLoginInOrOutLogsApi } from '@/services/login-log';
import { mainStore } from '@/store/main';
import { onMounted, reactive, ref, type Ref } from 'vue';
import moment from 'moment';

const spinning: Ref<boolean> = ref<boolean>(false);
const pageRequest: LoginInOrOutLogResultRequestDto = reactive<LoginInOrOutLogResultRequestDto>(new LoginInOrOutLogResultRequestDto);
const pageResult: Ref<PagedResultDto<LoginInOrOutLogDto>> = ref<PagedResultDto<LoginInOrOutLogDto>>(new PagedResultDto<LoginInOrOutLogDto>);
const operationTimes: Ref<Array<any>> = ref<Array<any>>(new Array<any>);

onMounted(async () => {
    await search();
});

//获取数据
async function search(): Promise<void> {
    const times = operationTimes.value;
    if (times && times.length == 2) {
        pageRequest.startTime = moment(times[0]._d).format(
            'YYYY-MM-DD HH:mm:ss'
        );
        pageRequest.endTime = moment(times[1]._d).format(
            'YYYY-MM-DD HH:mm:ss'
        );
    } else {
        pageRequest.startTime = undefined;
        pageRequest.endTime = undefined;
    }
    pageRequest.skipCount =
        (pageRequest.current - 1) * pageRequest.maxResultCount;
    spinning.value = true;
    pageResult.value = await getLoginInOrOutLogsApi(pageRequest);
    spinning.value = false;
}

async function requestSearch(): Promise<void> {
    pageRequest.current = 1;
    await search();
}

//判断isloginInOrOut:item是数据集合，type是类型。0代表着tag的type，1代表着要返回的中英文
function getloginInOrOut(item: any, type: number): string {
    const code: boolean = item.record.loginInOrOut;
    if (!type) {
        return code ? 'success' : 'default';
    }
    return i18n.global.t('upperComputer.loginInOrOutLog.' + code);
}
</script>